<template>
<div id="pin-form-msg">
  <group>
    <selector title="我在" v-model="formData.shopName" :options="options"></selector>
    <selector title="为你点了杯" v-model="formData.coffeeName" :options="optionDrinks"></selector>
    <x-textarea title="希望你是个" placeholder="输入你想认识的人的任何描述词语，例如：开朗、健谈" v-model="formData.content" :max="200" :height="72" :rows="3" autosize></x-textarea>
  </group>
  <box gap="20px">
    <x-button type="primary" @click.native="submit" :disabled="!canSubmit">提交</x-button>
  </box>
</div>
</template>
<script>
const defaultFormData = {
  title: '',
  content: '',
}
export default {
  data() {
    let formData = Object.assign({}, defaultFormData)
    let options = ['星巴克1', '星巴克2', '星巴克3']
    let optionDrinks = ['卡布奇诺', '馥芮白', '拿铁']
    return {
      formData,
      options,
      optionDrinks,
      isSubmitting: false,
    }
  },
  computed: {
    canSubmit() {
      if (this.isSubmitting) {
        return false
      }
      if (this.formData.title.trim() !== '' && this.formData.content.trim() !== '') {
        return true
      }
      return false
    }
  },
  methods: {
    submit() {
      let postData = this.formData
      this.isSubmitting = true
      this.$vux.loading.show({
        text: '提交中...'
      })
      this.$axios.post('/fan-gravity/map', postData)
        .then(data => {
          this.$vux.loading.hide()
          this.$vux.toast.text('提交成功！', 'top')
          this.isSubmitting = false
          this.formData = defaultFormData
          this.$emit('end-submit')
        })
        .catch(err => {
          this.$vux.alert.show({
            title: '出错啦！',
            content: err,
          })
          this.isSubmitting = false
          this.$vux.loading.hide()
        })
    }
  }
}
</script>
<style lang="stylus" scoped>
/*#pin-form-msg*/
</style>
